<template>
  <div class="listView">
    <listview-top :playlist="playlist" />
    <play-list :playlist="playlist" />
  </div>
</template>

<script>
  import {getPlayListDetail} from '@/api';
  import {onMounted, reactive, toRefs} from 'vue';
  import {useRoute} from 'vue-router';
  import {useStore} from 'vuex'
  import listviewTop from '@/components/listviewTop.vue'
  import playList from '@/components/playList.vue';
  export default {
    components:{
      listviewTop,
      playList,
    },
    setup() {
      let state = reactive({
        list:[],
        playlist:{
          creator:{},
          tracks:[]
        }
      })
      const route = useRoute();
      const store = useStore();
      onMounted(async () => {
        let id = route.query.id;
        let result = await getPlayListDetail(id);
        state.playlist = result.data.playlist;
        store.commit('setPlaylist',result.data.playlist.tracks);
        console.log(result);
      })
      return {
        ...toRefs(state),
      }
    }
  }
</script>

<style lang="less" scoped>
</style>